<template>
  <vxe-table
    id="selectedStudentPaper-table"
    :data="list"
    stripe
    min-height="0"
    :custom-config="vxeTableConfig"
    :column-config="{ resizable: true }"
    :size="vxeTableSize"
  >
    <vxe-column
      :title="t('selectedPaper.paperTitle')"
      field="paperTitle"
      align="center"
      show-header-overflow
      show-overflow
      min-width="100"
    />
    <vxe-column
      :title="t('selectedPaper.paperType')"
      field="paperType"
      align="center"
      show-header-overflow
      show-overflow
      min-width="100"
    />
    <vxe-column
      :title="t('selectedPaper.primaryAuthor')"
      field="primaryAuthor"
      align="center"
      show-header-overflow
      show-overflow
      min-width="100"
    />
    <vxe-column
      :title="t('selectedPaper.personalRanking')"
      field="personalRanking"
      align="center"
      show-header-overflow
      show-overflow
      min-width="100"
    >
      <template #default="{ row }">
        <div>{{ row.personalRanking }}</div>
        <div
          v-if="row.personalRanking === '并列第一' && row.parallelRanking && row.parallelCount"
          class="text-ellipsis"
        >
          {{ t('selectedPaper.parallelCountPrefix') }}{{ row.parallelCount
          }}{{ t('selectedPaper.parallelCountSuffix') }},
          {{ t('selectedPaper.parallelRankingPrefix') }}{{ row.parallelRanking
          }}{{ t('selectedPaper.parallelRankingSuffix') }}
        </div>
      </template>
    </vxe-column>
    <vxe-column
      :title="t('selectedPaper.journalName')"
      field="journalName"
      align="center"
      show-header-overflow
      show-overflow
      min-width="250"
    />
    <vxe-column
      :title="t('selectedPaper.journalIssn')"
      field="journalIssn"
      align="center"
      show-header-overflow
      show-overflow
      width="100"
    />
    <vxe-column
      :title="t('selectedPaper.journalDistrict')"
      field="journalDistrict"
      align="center"
      show-header-overflow
      show-overflow
      min-width="100"
    />
    <vxe-column
      :title="t('selectedPaper.publicationStatus')"
      field="publicationStatus"
      align="center"
      show-header-overflow
      show-overflow
      min-width="180"
    >
      <template #default="{ row }">
        <div>{{ row.publicationStatus }}</div>
        <div v-if="row.publicationStatus === '已接收'"
        >{{ t('selectedPaper.receiveTime') }}: {{ formatDate(row.receiveTime) }}</div
        >
        <div v-if="row.publicationStatus === '已在线'"
        >{{ t('selectedPaper.onlineTime') }}: {{ formatDate(row.onlineTime) }}</div
        >
        <div v-if="row.publicationStatus === '已在线'"
        >{{ t('selectedPaper.retrievalNumber') }}: {{ row.retrievalNumber }}</div
        >
        <div v-if="row.publicationStatus === '已发表'"
        >{{ t('selectedPaper.publishTime') }}: {{ formatDate(row.publishTime) }}</div
        >
        <div v-if="row.publicationStatus === '已发表'"
        >{{ t('selectedPaper.publicationNumber') }}: {{ row.publicationNumber }}</div
        >
      </template>
    </vxe-column>
    <vxe-column
      :title="t('selectedPaper.attachment')"
      field="attachment"
      align="center"
      show-header-overflow
      show-overflow
      min-width="150"
    >
      <template #default="{ row }">
        <el-button v-if="row.attachment" link type="primary" @click="handlePreview(row.attachment)">
          {{ t('fileObjectDownload.buttonName') }}
        </el-button>
      </template>
    </vxe-column>
  </vxe-table>
</template>

<script setup lang="ts">
import { useAppStore } from '@/store/modules/app'
import { StudentPaperVO } from '@/api/core/studentpaper'
import type { VxeTablePropTypes } from 'vxe-table'
import { formatDate } from '@/utils/formatTime'

defineOptions({ name: 'SelectedPaperTable' })

defineProps<{
  list: StudentPaperVO[]
}>()

const { t } = useI18n() // 国际化
const message = useMessage() // 消息弹窗

const vxeTableConfig: VxeTablePropTypes.CustomConfig = {
  storage: true,
  mode: 'drawer',
  checkMethod({ column }) {
    return !['seq', 'operator'].includes(column.field)
  }
}

const appStore = useAppStore()
const vxeTableSize = computed(() => appStore.getCurrentSizeVxe)

const emits = defineEmits<{
  (e: 'preview', attachment: string): void
}>()
const handlePreview = (attachment: string) => {
  if (!attachment || attachment === '[]') {
    message.error(t('fileObjectDownload.error'))
    return
  }
  emits('preview', attachment)
}
</script>
